<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入库</title>
    <link rel="stylesheet" href="../css/plant.css">
    <link rel="stylesheet" href="../css/stockIn.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font/font.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <style>
         /* #active {
            color:#4DC3B6
        } */
        .pageNumber div {
            cursor: pointer;
            float: right;
            float: left;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.39);
            border: 1px solid #999999;
            opacity: 1;
            border-radius: 4px;
            text-align: center;
            line-height: 36px;
            margin-right: 24px;
            font-size: 14px;
            color: #999;
            }
        .pageNumber #active {
            background: #4DC3B6;
            opacity: 1;
            border-radius: 4px;
            border: none;
            color: #fff;
            font-size: 14px;
        }
        #paging div {
            float: right;
            height: 36px;
            line-height: 36px;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 这是侧边栏 -->
            <div id="kong" class="col-md-2"></div>
            <div id="main_menu" class="col-md-2">
                <ul id="myul">
                    <li id="logoli">
                        <div><span class="iconfont icon-shouyefill"></span><a href="../index.html">首页</a>
                        </div>
                    </li>
                    <li id="have">
                        <div><span class="iconfont icon-tongji"></span>统计</div>
                        <ul>
                            <li><a href="../pages/zx_tongji.html">种植收购统计</a></li>
                            <li><a href="../pages/saleStatistical.html">销售统计</a> </li>
                            <li><a href="../pages/dj03.html">人员统计</a> </li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-zhongzhiguanli"></span>种植养殖</div>
                        <ul>
                            <li><a href="../pages/plant.html">蔬果</a></li>
                            <li><a href="../pages/farming.html">肉类</a></li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-caigou"></span>采购收购</div>
                        <ul>
                            <li><a href="../pages/Supplier_management.html">供应商管理</a> </li>
                            <li><a href="../pages/pick_fruit.html">蔬果</a></li>
                            <li><a href="../pages/pick_meat.html">肉类</a></li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-yunshuzhongwuliu-xianxing"></span>运输</div>
                        <ul>
                            <li><a href="../pages/tran_meat.html">肉类运输</a> </li>
                            <li><a href="../pages/tran_ve.html">蔬菜运输</a></li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-xinruku" id="logo"></span>仓库</div>
                        <ul>
                            <li><a href="../pages/stockIn.html">入库</a></li>
                            <li><a href="../pages/stockOut.html">出库</a></li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-shejishengchan"></span><a href="../pages/production.html">生产</a>
                        </div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-xiaoshou"></span>销售</div>
                        <ul>
                            <li><a href="../pages/zx_xiaoshou.html">销售流通</a></li>
                            <li><a href="../pages/online_sho_by.html">网购</a></li>
                            <li><a href="../pages/online_retreate.html">网购-退换记录</a></li>
                            <li><a href="../pages/zx_pima.html">批码管理</a></li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-lajitong"></span><a
                                href="../pages/waste_management.html">废料去向</a></div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-guanliyuan"></span>管理</div>
                        <ul id="secondary">
                            <li><a href="../pages/dj01.html">人员管理</a> </li>
                            <li><a href="../pages/dj02.html">操作日志</a> </li>
                            <li><a href="../pages/board.html">留言板</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="left_content" class="col-md-10">
                <!-- 这是头 -->
                <nav id="main_headnav">
                    <div class="clear">
                        <div class="navlefspan">
                            <span class="iconfont icon-caidan" id="hidenmenu"></span>
                            <span class="mytitle">食品流通安全管理系统</span>
                        </div>
                        <div class="navrigspan">
                            <span class="iconfont icon-tixing" id="tx"></span>
                            <!-- 头像 -->
                            <img src="../images/shouye/tx.jpg" alt="">
                            <!-- 姓名 -->
                            <span id="tc">退出</span>
                        </div>
                    </div>
                    <div>
                        <!-- 这里写小的头 -->
                    </div>
                </nav>
                <div id="main_content">
                    <div id="mycentent">
                        <!-- 这是内容 -->
                        <div id="box">
                            <div id="main">
                                <p id="mynav"><span>仓库</span><span>></span><span class="mycolor2">入库</span></p>
                                <div id="add">
                                    <span>入库信息</span>
                                    <button>新增</button>
                                </div>
                                <div id="search" class="row">
                                    <span>仓库编号</span><input type="text" placeholder="请输入" id="houseId">
                                    <span>商品名称</span><input type="text" placeholder="请输入" id="itemName">
                                    <span>入库时间</span><input type="date" id="rktime">
                                    <button id="chaxun">查询</button>
                                    <button id="reset">重置</button>
                                </div>
                                <table class="table table-bordered" id="mytable">
                                    <thead>
                                        <tr>
                                            <th>入库编号</th>
                                            <th>运输编号</th>
                                            <th>商品编号</th>
                                            <th>商品名称</th>
                                            <th>仓库编号</th>
                                            <th>入库数量</th>
                                            <th>入库时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="mytbody">
                                    </tbody>
                                </table>
                            </div>
                            <div id="paging" class="clear">
                                <div>
                                    跳至
                                    <input type="text" id="tiaozhuan" placeholder="2">
                                    页
                                </div>
                                <div>
                                    <select name="" id="tiaoshu">
                                        <option value="5">5条/页</option>
                                        <option value="10">10条/页</option>
                                        <option value="20">20条/页</option>
                                    </select>
                                </div>
                                <div class="clear" id="mypage">
                                    
                                </div>

                            </div>
                        </div>
                        <!-- Modal -->
                        <div id="tModal">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/index.js">
    </script>

</body>
<script>
    // 点击"新增"按钮，跳转到入库新增页面
    $('#add button').click(() => {
        window.location = './stockIn-add.html'
    })
    window.onload = function () {
        let x = $("#box").width()
        $('#box').width(x)
    }

    let count = 5;
    let page = 1;
    // 查询
    getData();

    function getData(){
        $.ajax({
            url:'/stockIn/get',
            data:{
                count:count,
                page:page,
                house_id:$('#houseId').val(),
                c2_name:$('#itemName').val(),
                in_stock_date:$('#rktime').val()
            },
            success:(res)=>{
                console.log(res);
                if(res.error){
                    console.log(res.error);
                }else{
                    // 列表渲染
                    $('#mytbody').html('');
                    $(res.data).each((i,v)=>{
                        $('#mytbody').append(`
                        <tr data-id="${v.in_stock_id}" data-yunshuhao="${v.trans_id}" data-cangkuhao="${v.house_id}" data-num="${v.in_stock_quantity}" data-shijian="${v.in_stock_date}">
                            <td>${v.in_stock_id}</td>
                            <td>${v.trans_id}</td>
                            <td>${v.g_id}</td>
                            <td>${v.c2_name}</td>
                            <td>${v.house_id}</td>
                            <td>${v.in_stock_quantity}</td>
                            <td>${v.in_stock_date.substring(0,10)}</td>
                            <td>
                                <a href="#" data-toggle="modal" data-target="#myModal" class="change">修改</a>
                                <a href="#" data-toggle="modal" data-target="#myModal" class="delete">删除</a>           
                            </td>
                        </tr>
                        `)
                    })
                    // 页码渲染
                    $('#mypage').html('');
                    $('#mypage').append(`
                        <button class="pre"><</button>
                    `)
                    for(let i = 1; i <= Math.ceil(res.total/count); i++){
                        if(page == i){
                            $('#mypage').append(`
                                    <button class="pages nowpage">${i}</button>
                            `)
                        }else{
                            $('#mypage').append(`
                                    <button class="pages">${i}</button>
                            `)
                        }
                    }
                    $('#mypage').append(`
                        <button class="next">></button>
                    `)
                    
                }
            },
            error:(err)=>{
                console.log(err);
            }
        })
    }
    // 获取页码数，该页对应的数据渲染到表格
    $('#mypage').on('click', '.pages', function () {
        page = $(this).text()
        getData()
    })
    // 上一页
    $('#mypage').on('click', '.pre', function () {
        if (page > 1) {
            page--
            getData()
        }
    })
    // 下一页
    $('#mypage').on('click', '.next', function () {
        let maxPage = document.querySelectorAll('#mypage .pages').length
        console.log(maxPage);
        if (page < maxPage) {
            page++
            getData();
        }
    })
    // 跳转
    $('#tiaozhuan').focus(() => {
        document.onkeydown = () => {
            console.log($('#tiaozhuan').val());
            page = $('#tiaozhuan').val();
            getData();
        }
    })
    // 条数
    $('#tiaoshu').change(() => {
        console.log($('#tiaoshu').val());
        count = $('#tiaoshu').val();
        page = 1
        getData();
    })
    // 条件查询
    $('#chaxun').click(()=>{
        page = 1
        getData();
    })
    // 重置
    $('#reset').click(()=>{
        $('#houseId').val('')
        $('#itemName').val('')
        $('#rktime').val('')
        page = 1
        getData();
    })
    

    // 删除
    $('#mytbody').on('click','.delete',function(){
        console.log($(this).parents('tr').attr('data-id'));
        $.ajax({
            url:'/stockIn/del',
            method:'get',
            data:{
                in_stock_id:$(this).parents('tr').attr('data-id')
            },
            success:(res)=>{
                if (res.error == 1) {
                    alert('该商品已经进入出库环节，无法删除该条数据')
                }else{
                    console.log(res);
                }
                getData();
            },
            error:(err)=>{
                console.log(err);
            }
        })
    })

    // 修改
    $('#mytbody').on('click','.change',function(){
        $('#tModal').html('')
        $('#tModal').html(`
         <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
             <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title" id="myModalLabel">修改入库数量</h4>
             </div>
             <div class="modal-body">
                <table id="information" cellspacing='0'>
        <tr>
            <td>入库编号</td>
            <td><input type="text" id="rkId" disabled></td>
        </tr>
        <tr>
            <td>运输编号</td>
            <td><input type="text" id="ysId" disabled></td>
        </tr>
        <tr>
            <td>仓库编号</td>
            <td>
              <select id="houseIds" disabled>
                <option value="100001">100001</option>
                <option value="100002">100002</option>
                <option value="100003">100003</option>
                <option value="100004">100004</option>
                <option value="100005">100005</option>
                <option value="100006">100006</option>
                <option value="100007">100007</option>
                <option value="100008">100008</option>
                <option value="100009">100009</option>
                <option value="100010">100010</option>
              </select>
            </td>
        </tr>
        <tr>
            <td>入库数量</td>
            <td><input type="text" id="rkNumber"></td>
        </tr>
        <tr>
            <td>入库时间</td>
            <td><input type="date" id="rkDate" disabled></td>
        </tr>
    </table>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                 <button type="button" class="btn btn-primary queren">确认</button>
             </div>
             </div>
         </div>
         </div>
        `)
        $('#rkId').val($(this).parents('tr').attr('data-id'))
        $('#ysId').val($(this).parents('tr').attr('data-yunshuhao'))
        $('#houseIds').val($(this).parents('tr').attr('data-cangkuhao'))
        // $('#rkNumber').val($(this).parents('tr').attr('data-num'))
        $('#rkDate').val($(this).parents('tr').attr('data-shijian'))
        console.log($(this).parents('tr').attr('data-id'));
        console.log($(this).parents('tr').attr('data-num'));
        
        $('#tModal').on('click','.queren',function(){
            // console.log($('#rkId').val());
            $.ajax({
            url:'/stockIn/edit',
            method:'get',
            data:{
                in_stock_id:$('#rkId').val(),
                in_stock_quantity:$('#rkNumber').val()
            },
            success:(res)=>{
                if (res.error == 1) {
                    alert('该商品已经进入出库环节，无法修改')
                }else{
                        console.log(res);
                        // $('#rkNumber').val('')
                        $('#myModal').modal('hide')
                }
                getData();
            },
            error:(err)=>{
                console.log(err);
            }
        })
        })
        // <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        // <div class="modal-dialog" role="document">
        //     <div class="modal-content">
        //     <div class="modal-header">
        //         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        //         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        //     </div>
        //     <div class="modal-body">
        //         ...
        //     </div>
        //     <div class="modal-footer">
        //         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        //         <button type="button" class="btn btn-primary">Save changes</button>
        //     </div>
        //     </div>
        // </div>
        // </div>
    })

</script>

</html>